<template>
  <div id="cardhgth" v-show="loading">
    <Card>
      <Row>
        <Col span="12"></Col>

        <Col span="12">
          <div class="loadings">
            <div style="width:12%; height: 100%;">
            </div>
            <!-- <i style="color: #778899; font-size: 34px" class="el-icon-loading"></i> -->
            <div class="TableBax">
              <Table loading :columns="columns1" :data="data1"></Table>
            </div></div
        ></Col>
        <Col span=""> </Col>
      </Row>
    </Card>
  </div>
</template>
<script>
export default {
  name: "loading",
  data() {
    return {
      columns1: [],
      data1: [],
      loading: false,
    };
  },
  created() {
    var that = this;
    this.bus.$on("loading", function (data) {
      that.loading = !!data;
    });
  },
};
</script>
<style scoped lang="less">
/*loading开始*/
.loading[data-v-1cc39212] {
  background-color: rgba(0, 0, 0, 0) !important;
}
.ivu-spin-fix {
  background-color: rgba(0, 0, 0, 0) !important;
}
.TableBax {
  margin-top:-60rem;
}
.loadings {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  margin-top: 5.3%;
margin-left: 13.8rem;
  color: #fff;
  padding: 100px 0 50px 0;
  background-color: rgba(255, 255, 255, 0.9) !important;
  p {
    padding: 0.15rem 0.15rem 0.2rem;
    color: #fff;
    font-size: 0.16rem;
  }
  img {
    width: 30px;
    height: 30px;
  }
}
#cardhgth {
  height: 50%;
}
</style>